<template>
  <!-- <el-table class="table" :data="tableData" border style="width: 100%" max-height="100%">
        <el-table-column prop="sailings" label="巡查班次" />
        <el-table-column prop="name" label="领班人" />
        <el-table-column prop="insObj" label="巡查对象" />
        <el-table-column prop="date" label="巡查时间" />
    </el-table> -->
  <div class="box">
    <p style="font-size: 18px; color: red; margin-bottom: 10px; margin-left: 20px">巡查记录表</p>
    <ul class="thead flex justify-around">
      <li>巡查班次</li>
      <li>领班人</li>
      <li>巡查对象</li>
      <li>巡查时间</li>
    </ul>
    <ul class="tbody flex justify-around" v-for="(item, index) in tableData" :key="index">
      <li>{{ item.sailings }}</li>
      <li>{{ item.name }}</li>
      <li>{{ item.insObj }}</li>
      <li>{{ item.date }}</li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
const tableData = [
  {
    sailings: '1',
    name: 'TOM',
    insObj: '河滨东路',
    date: '20：00-23：00'
  },
  {
    sailings: '2',
    name: 'Jerry',
    insObj: '花园',
    date: '23：00-02：00'
  },
  {
    sailings: '3',
    name: 'Kity',
    insObj: '老年社区',
    date: '02：00-05:00'
  },
  {
    sailings: '4',
    name: 'TOM',
    insObj: '大榕树口',
    date: '05:00-08:00'
  }

]
</script>

<style scoped lang="scss">
.box {
  height: 100%;
  width: 100%;
  margin-top: 10px;

  .thead {
    height: 20%;

    li {
      width: 30%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      background: #124f7c;
      color: #fff;
      font-weight: bold;
      // border: 1px solid skyblue;
    }
  }

  .tbody {
    li {
      width: 25%;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      border: 1px solid skyblue;
    }
  }
}
</style>
